<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>49-改变this指向bind</title>
</head>
<body>
    <button class="code">发送验证码</button>
    <script>
        // const obj = { name: '老八' }
        // // 改变this指向 - bind 方法
        // // 1. 基本使用
        // function fun(x, y, z) {
        //     console.log(this)
        //     console.log(x + y + z)
        //  }
        //  fun()
        //  fun.bind() // bind 不会调用函数
        // const fn = fun.bind() // 返回的是对原函数的拷贝
        // console.log(fn)
        // console.log(fn === fun)  // false

        // const fn = fun.bind(obj) // bind 可以改变this指向
        // const fn = fun.bind(obj, 1, 2, 3)  // 6
        // fn()  // 调用函数  {name: '老八'}
        // fun.bind(obj, 1, 2, 3)
        // fun()

        // 2. 使用场景 - 不需要调用函数，但是又想改变函数内部的this指向

        // 1. 发送短信5秒倒计时业务
        const btn = document.querySelector('.code')
        let flag = true // 开关变量，用来防止多次点击
        btn.addEventListener('click',function() {
            if(flag) {
                // 1.2 利用定时器做倒计时效果 setInterval 
                let i = 5
                // 点击之后立刻变化文字
                this.innerHTML = `05秒后重新获取`
                // 定时器
                let timeId = setInterval(function (){
                    i--
                    this.innerHTML = `0${i}秒后重新获取`

                    // 1.3 时间到了  就显示文字为  重新获取
                    if( i===0 ) {
                        this.innerHTML = `重新获取`
                        // 停止定时器
                        clearInterval(timeId)
                        flag = true
                    }   
                    // console.log(this)
                }.bind(this),1000)
                // 关闭开关
                flag = false
            }
        })

    </script>
</body>
</html>